<div class="flex justify-between items-center h-8">
  <div class="flex items-center space-x-1 shrink-0">
    <div class="flex items-center justify-center w-6 h-6">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-primary-500" data-icon="BracketsX" aria-hidden="true">
        <path d="M18.5708 20C19.8328 20 20.8568 18.977 20.8568 17.714V13.143L21.9998 12L20.8568 10.857V6.286C20.8568 5.023 19.8338 4 18.5708 4M5.429 4C4.166 4 3.143 5.023 3.143 6.286V10.857L2 12L3.143 13.143V17.714C3.143 18.977 4.166 20 5.429 20M15 9L9 15M9 9L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
    <div class="text-sm font-semibold">
      <div class="flex items-center">
        <div class="p-[1px] w-4 h-4 shrink-0"
          [matTooltip]="'PAC.Xpert.OutputVariablesInfo' | translate: {Default: 'The parameters will be a form for users to fill in before the dialogue, and the form content filled in by the user will replace the variables in the prompt string.'}"
          matTooltipPosition="above">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
            class="text-text-quaternary hover:text-text-tertiary w-full h-full">
            <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
  
  <div class="flex gap-2 items-center">
    <div class="flex items-center rounded-md h-7 px-3 space-x-1 cursor-pointer select-none text-text-secondary hover:bg-state-base-hover"
      [cdkMenuTriggerFor]="parameterTypeMenu">
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5 text-sm">
          <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"></path>
        </svg>
      </div>
      <div class="text-xs font-medium">{{ 'PAC.ACTIONS.Add' | translate: {Default: 'Add'} }}</div>
    </div>
  </div>
</div>

<form [formGroup]="form" class="mt-1">
  <div class="flex flex-col gap-4"
    formArrayName="parameters">

    @for (param of parameters.controls; track i; let i = $index) {
      <div class="w-full flex justify-start items-start"
        [formGroupName]="i">
        <div class="grow flex items-center gap-1 bg-gray-100 rounded-lg p-1 pl-2 group/item">
          @switch (param.value.type) {
            @case ('text') {
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="LetterSpacing01" aria-hidden="true">
                <g id="letter-spacing-01">
                  <path id="Icon" d="M9 13L15 13M7 17L11.2717 7.60225C11.5031 7.09323 11.6188 6.83872 11.7791 6.75976C11.9184 6.69115 12.0816 6.69115 12.2209 6.75976C12.3812 6.83872 12.4969 7.09323 12.7283 7.60225L17 17M21 3V21M3 3L3 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
              </svg>
            }
            @case ('paragraph') {
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="AlignLeft" aria-hidden="true">
                <g id="align-left">
                  <path id="Icon" d="M16 10H3M20 6H3M20 14H3M16 18H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
              </svg>
            }
            @case ('select') {
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="CheckDone01" aria-hidden="true">
                <g id="check-done-01">
                  <path id="Icon" d="M6 15L8 17L12.5 12.5M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
              </svg>
            }
            @case ('number') {
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="Hash02" aria-hidden="true">
                <g id="hash-02">
                  <path id="Icon" d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
              </svg>
            }
          }
          <input matInput placeholder="name" maxlength="30"
            class="h-6 leading-6 block w-full rounded-md border-0 px-1 py-1.5 text-gray-900  placeholder:text-gray-400 focus:outline-none
                  bg-transparent hover:bg-white focus:bg-white" type="text"
            [ngModel]="param.value.name"
            [ngModelOptions]="{standalone: true}"
            (ngModelChange)="updateParameter(i, 'name', $event)" >
          <div tabindex="0" class="p-1 rounded-md hover:bg-black/5 w-6 h-6 flex justify-center items-center cursor-pointer opacity-30 group-hover/item:opacity-100"
            [cdkMenuTriggerFor]="paramConfigMenu"
            [cdkMenuTriggerData]="{index: i, control: param}"
          >
            <i class="ri-settings-4-line"></i>
          </div>
        </div>
        <div class="flex flex-col justify-start items-center px-2">
          <button type="button" class="action-btn action-btn-l w-7 h-7 danger flex-shrink-0 group flex justify-center items-center rounded-lg overflow-hidden"
            (click)="deleteParameter(i)">
            <i class="ri-delete-bin-line"></i>
          </button>
        </div>
      </div>
    }
  </div>
</form>


<ng-template #parameterTypeMenu >
  <div #menu="cdkMenu" cdkMenu class="ngm-cdk-menu p-2">
    <div cdkMenuItem class="flex items-center px-2 h-8 rounded-lg hover:bg-gray-50 cursor-pointer"
      (click)="addParameter({type: eXpertParameterTypeEnum.TEXT, optional: true})">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="LetterSpacing01" aria-hidden="true">
        <g id="letter-spacing-01">
          <path id="Icon" d="M9 13L15 13M7 17L11.2717 7.60225C11.5031 7.09323 11.6188 6.83872 11.7791 6.75976C11.9184 6.69115 12.0816 6.69115 12.2209 6.75976C12.3812 6.83872 12.4969 7.09323 12.7283 7.60225L17 17M21 3V21M3 3L3 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
      <div class="ml-2 text-sm text-text-tertiary truncate">{{ 'PAC.Xpert.ParameterType_Text' | translate: {Default: 'Text'} }}</div>
    </div>
    <div cdkMenuItem class="flex items-center px-2 h-8 rounded-lg hover:bg-gray-50 cursor-pointer"
      (click)="addParameter({type: eXpertParameterTypeEnum.PARAGRAPH, optional: true})">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="AlignLeft" aria-hidden="true">
        <g id="align-left">
          <path id="Icon" d="M16 10H3M20 6H3M20 14H3M16 18H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
      <div class="ml-2 text-sm text-text-tertiary truncate">{{ 'PAC.Xpert.ParameterType_Paragraph' | translate: {Default: 'Paragraph'} }}</div>
    </div>
    <div cdkMenuItem class="flex items-center px-2 h-8 rounded-lg hover:bg-gray-50 cursor-pointer"
      (click)="addParameter({type: eXpertParameterTypeEnum.SELECT, optional: true})">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="CheckDone01" aria-hidden="true">
        <g id="check-done-01">
          <path id="Icon" d="M6 15L8 17L12.5 12.5M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
      <div class="ml-2 text-sm text-text-tertiary truncate">{{ 'PAC.Xpert.ParameterType_Select' | translate: {Default: 'Select'} }}</div>
    </div>
    <div cdkMenuItem class="flex items-center px-2 h-8 rounded-lg hover:bg-gray-50 cursor-pointer"
      (click)="addParameter({type: eXpertParameterTypeEnum.NUMBER, optional: true})">
      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" data-icon="Hash02" aria-hidden="true">
        <g id="hash-02">
          <path id="Icon" d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
      <div class="ml-2 text-sm text-text-tertiary truncate">{{ 'PAC.Xpert.ParameterType_Number' | translate: {Default: 'Number'} }}</div>
    </div>
  </div>
</ng-template>

<ng-template #paramConfigMenu let-index="index" let-control="control">
  <div class="ngm-cdk-menu parameter-config-menu p-4" cdkMenu>
    <h3 class="text-lg font-medium leading-6">{{ 'PAC.Xpert.EditParameter' | translate: {Default: 'Edit parameter'} }}</h3>

    <div class="mt-4 mb-8" tabindex="-1">
      <div class="space-y-4">
        <div>
          <div class="leading-8 text-sm font-medium">{{ 'PAC.Xpert.ParameterType' | translate: {Default: 'Parameter type'} }}</div>
          <div>
            <ul class="parameter-type-list flex space-x-2"
              cdkListbox
              [ngModel]="[control.value.type]"
              (ngModelChange)="updateParameter(index, 'type', $event[0])"
              [ngModelOptions]="{standalone: true}"
            >
              <li class="space-y-1"
                [cdkOption]="eXpertParameterTypeEnum.TEXT">
                <div class="shrink-0">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" data-icon="LetterSpacing01" aria-hidden="true">
                    <g id="letter-spacing-01">
                      <path id="Icon" d="M9 13L15 13M7 17L11.2717 7.60225C11.5031 7.09323 11.6188 6.83872 11.7791 6.75976C11.9184 6.69115 12.0816 6.69115 12.2209 6.75976C12.3812 6.83872 12.4969 7.09323 12.7283 7.60225L17 17M21 3V21M3 3L3 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                  </svg>
                </div>
                <span class="">{{ 'PAC.Xpert.ParameterType_Text' | translate: {Default: 'Text'} }}</span>
              </li>

              <li class="space-y-1"
                [cdkOption]="eXpertParameterTypeEnum.PARAGRAPH">
                <div class="shrink-0">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" data-icon="AlignLeft" aria-hidden="true">
                    <g id="align-left">
                      <path id="Icon" d="M16 10H3M20 6H3M20 14H3M16 18H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                  </svg>
                </div>
                <span class="">{{ 'PAC.Xpert.ParameterType_Paragraph' | translate: {Default: 'Paragraph'} }}</span>
              </li>

              <li class="space-y-1"
                [cdkOption]="eXpertParameterTypeEnum.SELECT">
                <div class="shrink-0">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" data-icon="CheckDone01" aria-hidden="true">
                    <g id="check-done-01">
                      <path id="Icon" d="M6 15L8 17L12.5 12.5M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                  </svg>
                </div>
                <span class="">{{ 'PAC.Xpert.ParameterType_Select' | translate: {Default: 'Select'} }}</span>
              </li>

              <li class="space-y-1"
                [cdkOption]="eXpertParameterTypeEnum.NUMBER">
                <div class="shrink-0">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" data-icon="Hash02" aria-hidden="true">
                    <g id="hash-02">
                      <path id="Icon" d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                    </g>
                  </svg>
                </div>
                <span class="">{{ 'PAC.Xpert.ParameterType_Number' | translate: {Default: 'Number'} }}</span>
              </li>

            </ul>
          </div>
        </div>
        <div>
          <div class="leading-8 text-[13px] font-medium">{{ 'PAC.Xpert.ParameterName' | translate: {Default: 'Parameter name'} }}</div>
          <div>
            <input matInput class="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
              placeholder="{{'PAC.Xpert.PleaseEnter' | translate: {Default: 'Please enter'} }}" type="text"
              [ngModel]="control.value.name"
              (ngModelChange)="updateParameter(index, 'name', $event)"
              [ngModelOptions]="{standalone: true}"
            >
          </div>
        </div>
        <div>
          <div class="leading-8 text-[13px] font-medium text-gray-700">{{ 'PAC.Xpert.ParameterTitle' | translate: {Default: 'Parameter title'} }}</div>
          <div>
            <input matInput class="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
              placeholder="{{'PAC.Xpert.PleaseEnter' | translate: {Default: 'Please enter'} }}" type="text"
              [ngModel]="control.value.title"
              (ngModelChange)="updateParameter(index, 'title', $event)"
              [ngModelOptions]="{standalone: true}"
            >
          </div>
        </div>
        <div>
          <div class="leading-8 text-[13px] font-medium text-gray-700">{{ 'PAC.Xpert.ParameterDescription' | translate: {Default: 'Parameter description'} }}</div>
          <div>
            <textarea matInput class="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
              placeholder="{{'PAC.Xpert.PleaseEnter' | translate: {Default: 'Please enter'} }}" type="text"
              [ngModel]="control.value.description"
              (ngModelChange)="updateParameter(index, 'description', $event)"
              [ngModelOptions]="{standalone: true}"
            ></textarea>
          </div>
        </div>

        @if (control.value.type === eXpertParameterTypeEnum.SELECT) {
          <div>
            <div class="leading-8 text-[13px] font-medium text-gray-700">{{'PAC.Xpert.SelectOptions' | translate: {Default: 'Select options'} }}</div>
            <div>
              <div>
                <div class="mb-1">
                  <div class="space-y-1" cdkDropList (cdkDropListDropped)="drop(index, $event)">
                    @for (option of control.value.options; track j; let j = $index) {
                      <div class="relative flex items-center border border-solid border-divider-regular rounded-lg"
                        cdkDrag>
                        <div class="handle flex items-center justify-center ml-2 w-4 h-4 cursor-grab"
                          cdkDragHandle>
                          <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3"></path>
                          </svg>
                        </div>
                        <input class="flex-1 pl-4 pr-8 text-sm leading-9 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer" type="input"
                          [ngModel]="control.value.options[j]"
                          (ngModelChange)="setOption(index, j, $event)"
                          [ngModelOptions]="{standalone: true}"
                          >
                        <div class="absolute top-1/2 translate-y-[-50%] right-1.5 flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-[#FEE4E2]"
                          (click)="deleteOption(index, j)">
                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 6H14M6 8H18M16.6667 8L16.1991 15.0129C16.129 16.065 16.0939 16.5911 15.8667 16.99C15.6666 17.3412 15.3648 17.6235 15.0011 17.7998C14.588 18 14.0607 18 13.0062 18H10.9938C9.93927 18 9.41202 18 8.99889 17.7998C8.63517 17.6235 8.33339 17.3412 8.13332 16.99C7.90607 16.5911 7.871 16.065 7.80086 15.0129L7.33333 8M10.6667 11V14.3333M13.3333 11V14.3333" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                        </div>
                      </div>
                    }
                  </div>
                </div>
                <div class="flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400 bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300
                  hover:bg-gray-200"
                  (click)="addOption(index)">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" width="16" height="16">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
                  </svg>
                  <div class="text-gray-500 text-[13px]">{{'PAC.Xpert.AddOptions' | translate: {Default: 'Add option'} }}</div>
                </div>
              </div>
            </div>
          </div>
        } @else {
          <div>
            <div class="leading-8 text-[13px] font-medium text-gray-700"> {{ 'PAC.Xpert.MaxLength' | translate: {Default: 'Max length'} }}</div>
            <div>
              <div>
                <input matInput max="256" min="1" class="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" type="number"
                  [ngModel]="control.value.maximum"
                  (ngModelChange)="updateParameter(index, 'maximum', $event)"
                  [ngModelOptions]="{standalone: true}"
                >
              </div>
            </div>
          </div>
        }
        <div>
          <div class="leading-8 text-[13px] font-medium text-gray-700"> {{ 'PAC.Xpert.Optional' | translate: {Default: 'Optional'} }}</div>
          <div>
            <mat-slide-toggle ngm-density="xs"
              [ngModel]="control.value.optional"
              (ngModelChange)="updateParameter(index, 'optional', $event)"
              [ngModelOptions]="{standalone: true}"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>